<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>订单管理</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="../../css/main.css">
	<link rel="stylesheet" href="../../student/css/head.css">
	<link rel="stylesheet" href="../../css/window.css">
	<link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" />
	<style scoped>
		[v-cloak] {
			display: none;
		}

		.searchBox{
			width: 100%;
			height: 84px;
			background: linear-gradient(to bottom, #ffc359, #FFA247);
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.search-box{
			width: 80%;
			height: 32px;
			background: #FFFFFF;
			border-radius: 10px;
			position: relative;
		}
		.search-box>input{
			width: 100%;
			height: 100%;
			border-radius: 10px;
			border: none;
			font-size: 14px;
			padding-left: 8px;
		}
		.search-box>img{
			position: absolute;
			width: 17px;
			height: 17px;
			right: 8px;
			top: 8px;
		}
		.searchTab{
			display: flex;
			padding: 14px 20px;
			justify-content: space-around;
		}
		.searchTab>div{
			width: 46px;
			height: 25px;
		}
		.searchTab>div>span{
			display: block;
			width: 42px;
			height: 25px;
			background: #E4E4E4;
			box-shadow: 0px 0px 3px 0px rgba(153,153,153,0.3);
			border-radius: 6px;
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 15px;
			color: #888888;
			line-height: 25px;
			text-align: center;
		}
		.searchTab>div>span.active{
			background: #F9AD2C;
			color: #fff;
		}
		.listBox{
			padding: 0 12px;
			overflow-y: scroll;
		}
		.listItem{
			height: 70px;
			background: #FFFFFF;
			border-radius: 8px;
			margin-bottom: 12px;
			display: flex;
			padding: 8px 12px;
			justify-content: space-between;
			align-items: center;
			position: relative;
		}
		.listItem .img_avatar{
			width: 46px;
			height: 46px;
			border-radius: 50%;
		}
		.listItem .img_avatar img{
			width: 100%;
		}
		.listItem .backMoney{
			width: 47px;
			height: 19px;
			line-height: 19px;
			background: rgba(77,180,13,0);
			box-shadow: 0px 0px 6px 0px #4492FB;
			border-radius: 3px;
			color: #4493FB;
			font-size: 11px;
		}
		.order_info{
			flex: 1;
			padding-left: 2px;
		}
		.order_info img{
			display: block;
			width: 15px;
			margin-right: 4px;
		}
		.order_info p{
			color: #F9AD2C;
			font-size: 14px;
			font-weight: bold;
			display: flex;
			justify-content: start;
			align-items: center;
			margin: 4px;
		}
		.order_info p span{
			color: #888888;
			font-size: 13px;
			margin-left: 4px;
			max-width: 160px;
		}
		.listItem .order_date{
			color: #888888;
			font-size: 12px;
			margin-left: 4px;
			position: absolute;
			right: 5px;
			top: 5px;
		}
	</style>
</head>

<body>
	<div style="height: 40px;"></div>
	<div class="header">
		<div class="header_title">订单管理</div>
		<img src="../../image/return.png" alt="" class="return" onclick="history.back()">
	</div>
	<div id="order-food" v-cloak style="text-align: center; margin-top: -1px;">
		<!-- <div class="searchBox">
			<div class="search-box">
				<input type="text" :value="searchValue" placeholder="请输入学生或金额">
				<img src="../../image/search_1.png" alt="" @click="searchTap()"/>
			</div>
		</div> -->
		<nav class="searchTab">
			<div @click="searchTap(i)" v-for="(item,i) in tabList" :key="i">
				<span :class="switchTabIndex == i ? 'active' : ''">{{item}}</span>
			</div>
		</nav>
		<div class="listBox" :style="{ height: updateScreenSize+'px' }">
			<div class="listItem" v-for="(item,i) in itemList" :key="i" @click="goUrl('./detail_info.html?id='+item.id)">
				<!-- <div class="img_avatar" >
					<img src="img/payMoney.png" alt="" />
				</div> -->
				<div class="order_info">
					<p><img src="img/payMoney.png" alt="" />学生姓名:<span>{{item.personName}}</span></p>
					<p><img src="img/payMoney.png" alt="" />订单号:<span>{{item.tradeNo}}</span></p>
					<p><img src="img/payMoney.png" alt="" />支付金额:<span style="color: #F74751;">￥{{item.fee}}</span></p>
				</div>
				<span class="order_date">{{item.time}}</span>
				<!-- <span class="backMoney" @click.stop="backMoney(item.id)">退款</span> -->
			</div>
			<div v-show="itemList.length == 0" style="padding-top: 50px; font-size: 20px; color: #666;">暂无数据</div>
		</div>
		<van-dialog v-model="show" title="温馨提示" message="是否确认退款？" show-cancel-button close-on-click-overlay @confirm="confirm">
		</van-dialog>
		<van-notify v-model="promptShow" :type="showNotifyType">
		  <!-- <van-icon name="bell" style="margin-right: 4px;" /> -->
		  <span>{{showNotifyText}}</span>
		</van-notify>
	</div>

	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>
	<script src="/scriptZIP/zh-cn.min.js"></script>
	<script src="/scriptZIP/qs.min.js"></script>
	<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
	<script src="/js/common.js"></script>
	<script>
		// Vue.use(vant.Lazyload);
		dayjs.locale('zh-cn');
		// var student = getStudent();
		// var schoolId=student.schoolId;
		var agengtId = localStorage.getItem('agentId');
		var app = new Vue({
			el: '#order-food',
			data: {
				studentId: params().id,
				updateScreenSize: 0,
				show: false,
				promptShow: false,
				tabList: ['今天','昨天','本周','本月','上月'],
				switchTabIndex: 2,
				searchValue: '',
				searchStartDate:'',
				searchEndDate:'',
				itemList: [],
				showNotifyType: '',
				showNotifyText: '',
			},
			created: function () {
				this.getWeekStartAndEnd();
				this.updateScreenSize = window.innerHeight - 260;
				this.getData();
			},
			mounted: function(){
			},
			methods: {
				searchTap: function (i) {
					this.switchTabIndex = i;
					switch(i){
						case 0:
							this.getToday()
						break;
						case 1:
							this.getYesterday()
						break;
						case 2:
							this.getWeekStartAndEnd()
						break;
						case 3:
							this.getThisMoon()
						break;
						case 4:
							this.getLastMoon()
						break;
					}
					this.getData();
				},
				goUrl: function (url) {
					window.location = url
				},
				backMoney: function(name){
					this.show = true
				},
				confirm(){
					console.log(name+'确认退款。。。。')
					this.showNotify('success','操作成功');
					/* axios.post('/api//'+this.studentId, { params: { id: this.studentId } })
					    .then(function (response) {
					    }.bind(this))
					    .catch(function (error) {
					        console.error('Error fetching attendance records:', error);
					}); */
				},
				showNotify(type, text) {
					this.showNotifyType = type;
					this.showNotifyText = text;
					this.promptShow = true;
					setTimeout(() => {
						this.promptShow = false;
					}, 2000);
				},
				getData(){
					axios.get('/s/order/listMeal', {
						params: { 
							studentId: this.studentId,
							startTime: this.searchStartDate,
							endTime: this.searchEndDate
						}
					}).then(function (response) {
					        console.log(response)
							if(response.status == 200){
								this.itemList = response.data
							}else{
								this.showNotify('danger', response.data.msg);
							}
					}.bind(this))
					.catch(function (error) {
					        console.error('Error fetching attendance records:', error);
					});
				},
				getWeekStartAndEnd() {// 获取本周的开始时间和结束时间
					// 获取当前日期
					const today = new Date()
					// 计算今天是一周的第几天
					const dayOfWeek = today.getDay(); // 星期天是0，星期一是1
				
					// 往前推一天到周日开始（如果是周一，则不需要）
					let weekStart = new Date(today);
					if (dayOfWeek !== 0) {
						weekStart.setDate(weekStart.getDate() - dayOfWeek + 1);
					} else {
						weekStart.setDate(weekStart.getDate() - dayOfWeek - 6);
					}
				
					// 往后推一天到周日结束
					let weekEnd = new Date(today);
					if (dayOfWeek !== 0) {
						weekEnd.setDate(weekEnd.getDate() + (7 - dayOfWeek));
					} else {
						weekEnd.setDate(weekEnd.getDate());
					}
					const start = `${weekStart.getFullYear()}-${(weekStart.getMonth() + 1) > 9 ? weekStart.getMonth() + 1 : '0' + (weekStart.getMonth() + 1)}-${weekStart.getDate() > 9 ? weekStart.getDate() : '0' + weekStart.getDate()}`
					const end = `${weekEnd.getFullYear()}-${(weekEnd.getMonth() + 1) > 9 ? weekEnd.getMonth() + 1 : '0' + (weekEnd.getMonth() + 1)}-${weekEnd.getDate() > 9 ? weekEnd.getDate() : '0' + weekEnd.getDate()}`
					// return [start, end]
					this.searchStartDate = start;
					this.searchEndDate = end;
				},
				getToday(){
					const today = new Date();
					const year = today.getFullYear(); // 获取年份
					const month = today.getMonth() + 1; // 获取月份（注意要加一）
					const day = today.getDate(); // 获取日期
					this.searchStartDate = year+'-'+month+'-'+day;
					this.searchEndDate = year+'-'+month+'-'+day;
				},
				getYesterday(){
					let today = new Date(); // 获取当前日期
					let yesterday = new Date(today); // 复制当前日期
					yesterday.setDate(today.getDate() - 1); // 设置为昨天日期
					let yesterdayDate = yesterday.toISOString().slice(0, 10); // 转换为本地日期字符串（格式：YYYY-MM-DD）
					this.searchStartDate = yesterdayDate;
					this.searchEndDate = yesterdayDate;
				},
				getThisMoon(){
					// 获取当前日期
					let currentDate = new Date();
					
					// 获取当前月份的第一天
					let data = currentDate.setMonth(currentDate.getMonth(), 1)
					this.searchStartDate = this.timestampToDateFormat(data);
					// 获取当前月份的最后一天
					let lastDate = currentDate.setMonth(currentDate.getMonth()+1, 0);
					this.searchEndDate = this.timestampToDateFormat(lastDate);
				},
				getLastMoon(){
					let today = new Date();
					let firstDayOfLastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
					let lastDayOfLastMonth = new Date(today.getFullYear(), today.getMonth(), 0);
					this.searchStartDate = this.timestampToDateFormat(firstDayOfLastMonth.toLocaleString());
					this.searchEndDate = this.timestampToDateFormat(lastDayOfLastMonth.toLocaleString());
				},
				timestampToDateFormat(timestamp) {//时间戳转日期
				  const dateObj = new Date(timestamp); // 创建Date对象
				  const year = dateObj.getFullYear(); // 获取年份
				  const month = ("0" + (dateObj.getMonth() + 1)).slice(-2); // 获取月份，并补零
				  const day = ("0" + dateObj.getDate()).slice(-2); // 获取日期，并补零
				  return `${year}-${month}-${day}`; // 返回转换后的日期格式
				}

			},
			computed: {
				
			}
		});

	</script>
</body>

</html>